<template>
  <div class="app-container-10 container-f0f2f5 app-main system-menu-container">
    <div class="container-fff app-container-15 app-ele-border-radius-0">
      <el-form :inline="true">
        <el-form-item label="菜单名称">
          <el-input
            v-model="searchModel.sectorName"
            placeholder="请输入菜单名称"
            clearable
            size="small"
            @keyup.enter.native="getList"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchModel.status" placeholder="菜单状态" clearable size="small">
            <el-option :key="1" label="隐藏" :value="1"></el-option>
            <el-option :key="2" label="显示" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜索
          </el-button>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="dialogAddMenu=true">
            新增
          </el-button>
        </el-form-item>
      </el-form>

      <div>
        <el-table
          :data="menuList"
          row-key="menuId"
          v-loading="loading"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="icon" label="图标">
            <template slot-scope="scope">
              <svg-icon :icon-class="scope.row.icon"/>
            </template>
          </el-table-column>
          <el-table-column prop="orderNum" label="排序"></el-table-column>
          <el-table-column prop="menuType" label="类型">
            <template slot-scope="scope">
              <!--目录 D,菜单M,B按钮-->
              <span>{{ scope.row.menuType === 'D' ? '目录':scope.row.menuType === 'M' ? '菜单':'按钮' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="visible" label="可见">
            <template slot-scope="scope">
              <span>{{ scope.row.visible === 1 ? '可见':'隐藏' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="right" width="150">
            <template>
              <el-button size="mini" type="text" @click="$message.error('演示不支持该操作')">修改</el-button>
              <el-button size="mini" type="text" @click="$message.error('演示不支持该操作')">新增</el-button>
              <el-button size="mini" type="text" @click="$message.error('演示不支持该操作')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="添加菜单"
      :visible.sync="dialogAddMenu"
      width="600px"
    >
      <div class="dialog-content">
        <evue-form ref="addMenuForm" v-model="addMenuForm" :option="addMenuOption" @submit="submit">
          <template v-slot:parent>
            <el-cascader
              v-model="addMenuForm.parentId"
              :options="menuList"
              :props="{ checkStrictly: true,value:'id',label:'name' }"
              clearable></el-cascader>
          </template>
          <!--菜单图标-->
          <template v-slot:menuIcon>

            <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
            >
              <div class="menu-icon-box">
                <div v-for="item of svgIcons" :key="item" @click="handleClipboard(item,$event)">
                  <svg-icon :icon-class="item" class-name="disabled"/>
                  <span>{{ item }}</span>
                </div>
              </div>
              <el-input slot="reference" v-model="addMenuForm.icon" placeholder="点击选择图标" readonly>
                <svg-icon
                  v-if="addMenuForm.icon"
                  slot="prefix"
                  :icon-class="addMenuForm.icon"
                  class="el-input__icon"
                  style="height: 32px;width: 16px;"
                />
                <i v-else slot="prefix" class="el-icon-search el-input__icon"></i>
              </el-input>
            </el-popover>


          </template>
          <el-button size="small" @click="cancel" slot="menuBottom">取消</el-button>
        </evue-form>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import Menu from './menu'

  export default Menu
</script>
